<template>
  <div class="goods-info" v-if="Object.keys(goodsInfo).length !== 0">
    <div class="desc clearfix" v-if="goodsInfo.detailImage[0].desc.trim() !== ''">
      <div class="left-line fl"></div>
      <div class="desc-title">{{goodsInfo.detailImage[0].desc}}</div>
      <div class="right-line fr"></div>
    </div>
    <ul>
      <li>
        <div class="goods-key">{{goodsInfo.detailImage[0].key}}</div>
        <div class="goods-item" v-for="(item, index) in goodsInfo.detailImage[0].list" :key="index">
          <img v-lazy="item" @load="imgLoad" alt="display" />
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "detail-goods-info",
  props: {
    goodsInfo: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      counter: 0,
      imgLength: 0
    };
  },
  computed: {},
  methods: {
    imgLoad() {
      if (++this.counter === this.imgLength) {
        this.$emit("imgloaded");
      }
    }
  },
  watch: {
    goodsInfo() {
      this.imgLength = this.goodsInfo.detailImage[0].list.length;
    }
  }
};
</script>

<style scoped>
.goods-info {
  background: #fff;
}
.desc {
  padding: 0 15px;
  margin-bottom: 8px;
}
.desc-title {
  padding: 15px 0;
}
.left-line,
.right-line {
  width: 88px;
  height: 1px;
  background: #a3a3a5;
  position: relative;
}
.left-line::before,
.right-line::after {
  content: "";
  display: block;
  position: absolute;
  left: -2px;
  top: -2px;
  width: 5px;
  height: 5px;
  background: #000;
  border-radius: 50%;
}
.right-line::after {
  left: auto;
  right: -2px;
}
.goods-key {
  padding: 10px 0;
  padding-left: 18px;
}
.goods-item {
  margin-top: 10px;
}
.goods-item img {
  width: 100%;
}
</style>